<section id="todoapp" *mobxAutorun>
  <header id="header">
    <h1>todos</h1>
    <form name="new-todo" id="todo-form" (submit)="addTodo()">
      <input id="new-todo" name="title" placeholder="What need to be done?" [(ngModel)]="title" autofocus>
    </form>
  </header>

  <section id="main" class="">
    <input id="toggle-all" type="checkbox" [checked]="todos.allComplete"
           (change)="todos.setCompleteAll(!todos.allComplete)">

    <label for="toggle-all">Mark all as complete</label>

    <ul id="todo-list">
      <li *ngFor="let todo of todos.filteredTodos" [class.completed]="todo.completed">
        <div class="view">
          <input type="checkbox" class="toggle" [checked]="todo.completed"
                 (change)="todo.setCompleted(!todo.completed)">
          <label>{{todo.title}}</label>
          <button class="destroy" (click)="todos.removeTodo(todo)"></button>
        </div>
      </li>
    </ul>
  </section>

  <footer id="footer">
    <span id="todo-count">
      <strong>{{todos.uncompletedItems}}</strong>
      items left
    </span>

    <ul id="filters">
      <li>
        <a [class.selected]="todos.filter === 'SHOW_ALL'" (click)="todos.showAll()">All</a>
      </li>
      <li>
        <a [class.selected]="todos.filter === 'ACTIVE'" (click)="todos.showActive()">Active</a>
      </li>
      <li>
        <a [class.selected]="todos.filter === 'COMPLETED'" (click)="todos.showCompleted()">Completed</a>
      </li>
    </ul>
    <button id="clear-completed" (click)="todos.clearCompleted()">Clear completed</button>
  </footer>
</section>
